import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, Form, Select, Button, message, Modal, Input, Popover} from 'antd';
const Option = Select.Option,
    FormItem = Form.Item;
import {  _validate, _maskRender } from '../../store/actions'

import SearchInput from '../../components/search-input'
const tempData = [
    {
        code: 1,
        patientName:'张三',
        receipt:{
            name:'李四',
            address:'河南省郑州市高新区科学大道23号',
            mobile:'13783582026'
        },
        type:'打印',
        modality:'CT',
        createDate:'2016-05-21 10:21',
        cost: '30.00',
        status:0
    }, {
        code: 2,
        patientName:'张三',
        receipt:{
            name:'李四',
            address:'河南省郑州市高新区科学大道23号',
            mobile:'13783582026'
        },
        type:'打印',
        modality:'CT',
        createDate:'2016-05-21 10:21',
        cost: '30.00',
        status:1
    },{
        code: 3,
        patientName:'张三',
        receipt:{
            name:'李四',
            address:'河南省郑州市高新区科学大道23号',
            mobile:'13783582026'
        },
        type:'打印',
        modality:'CT',
        createDate:'2016-05-21 10:21',
        cost: '30.00',
        status:2
    },{
        code: 4,
        patientName:'张三',
        receipt:{
            name:'李四',
            address:'河南省郑州市高新区科学大道23号',
            mobile:'13783582026'
        },
        type:'打印',
        modality:'CT',
        createDate:'2016-05-21 10:21',
        cost: '30.00',
        status:3
    }
];
//const _actions = _.keyBy(tempActionData,'id');

class FilterForm extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            defValue:this.props.defValue || ''
        };
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleSubmit(e){
        const _this = this;
        _validate(e,_this,function(v){
            _this.props.reFetch(v)
        })
    }
    render(){
        if(window.sessionStorage){
            window.sessionStorage.setItem('test','testValue')
        }
        const { getFieldProps/*, getFieldError, isFieldValidating*/ } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 3 },
            wrapperCol: { span: 12 }
        };
        const filterByStatus = getFieldProps('status', {
            initialValue:this.state.defValue
        });
        return (
            <div style={{
                    border:'1px solid #ddd',
                    overflow:'hidden',
                    padding:'20px 10px',
                    margin:'0 0 10px',
                    backgroundColor: '#eee',
                    borderRadius:'5px'
                }}>
                <FormItem
                    label="影像状态"
                    help="按状态筛选影像"
                    {...formItemLayout}
                >
                    <Select defaultValue='all'
                        {...filterByStatus}
                            placeholder="请选择亲友"
                            style={{ width: '60%' }}>
                        <Option value=''>全部</Option>
                        <Option value='-2'>不通过</Option>
                        <Option value='-1'>导入出错</Option>
                        <Option value='0'>未导入</Option>
                        <Option value='1'>待审核</Option>
                        <Option value='2'>审核通过</Option>
                    </Select>
                </FormItem>
                <FormItem wrapperCol={{ span: 12, offset: 3 }}>
                    <Button type="primary" onClick={this.handleSubmit}>查询</Button>
                </FormItem>
            </div>)
    }
}
FilterForm = Form.create()(FilterForm);
class _OrderManage extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            filters:{}
        };
        this.onSelectChange = this.onSelectChange.bind(this);
        this.reFetch = this.reFetch.bind(this);
        this.switch = this.switch.bind(this);
        this.goEdit = this.goEdit.bind(this)
    }
    componentDidMount(){
        _maskRender();
    }
    componentWillMount(){
        /* 获取角色列表 */
    }
    componentWillReceiveProps(nextProp){
        this.setState({
            images: nextProp.items,
            isFetch:nextProp.isFetch,
            imagesLen:nextProp.items && nextProp.items.length
        })
    }
    onSelectChange(selectedRowKeys) {
        this.setState({ selectedRowKeys });
    }
    reFetch(){
       /* 重新获取数据 */
    }
    switchStatus(type){
        if(type === 'on'){
            /* 启用角色 */
        }else if(type === 'off'){
            /* 停用角色 */
        }
    }
    switch(e){
        e.preventDefault();
        const _t = e.target.dataset;
        const modalOpts = {
            title: _t.type == 'on'?'启用角色':'停用角色',
            content: _t.type == 'on'?`确认要启用角色 ${_t.name} 吗？`:`确认要停用角色 ${_t.name} 吗？`,
            okText: _t.type == 'on'?'启用':'停用',
            onOk:this.switchStatus(_t.type)
        };
        Modal.confirm({...modalOpts})
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    goEdit(e){
        e.preventDefault();
        const _t = e.target.dataset;
        this.context.router.push({state:{hello:1,world:2},pathname:`/role-edit/${_t.id}`})
    }
    render(){
        const _this = this;
        const columns = [{
            title: '订单号',
            dataIndex: 'code'
        }, {
            title: '患者姓名',
            dataIndex: 'patientName'
        }, {
            title: '收货信息',
            dataIndex: 'receipt',
            render(test){
                return (
                  <div>{test.name}<br />{test.mobile}<br />{test.address}</div>
                )
            }
        }, {
            title: '订单类型',
            dataIndex: 'type'
        }, {
            title: '设备类型',
            dataIndex: 'modality'
        }, {
            title: '收费金额(元)',
            dataIndex: 'cost'
        },  {
            title: '状态',
            dataIndex: 'status',
            render(text){
                switch (text){
                    case 0:
                        return <span style={{color:'red'}}>未付款</span>;
                    case 1:
                        return <span style={{color:'#ff6600'}}>待处理</span>;
                    case 2:
                        return <span style={{color:'#333'}}>配送中</span>;
                    case 3:
                        return <span style={{color:'green'}}>交易完成</span>;
                    default:
                        return <span style={{color:'#ccc'}}>未知状态</span>;
                }
            }
        },  {
            title: '创建时间',
            dataIndex: 'createDate'
        },{
            title: '操作',
            render: (text, record) => {
                switch(record.status){
                    case 0:
                    case 3:
                        return (
                            <div>
                                <a href="#" data-id={`${record.id}`}>阅片</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`}>详情</a>
                            </div>
                        );
                    case 1:
                        return (
                            <div>
                                <a href="#" data-id={`${record.id}`}>阅片</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`}>打印</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`}>详情</a>
                            </div>
                        );
                    case 2:
                        return (
                            <div>
                                <a href="#" data-id={`${record.id}`}>阅片</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`}>填写邮寄单</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`}>详情</a>
                            </div>
                        );
                    default:
                        return '--';
                }
            }
        }];
        const dataLen = this.state.imagesLen;
        const pagination = {
            total: dataLen,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {
                /*console.log('Current: ', current, '; PageSize: ', pageSize);*/
            },
            onChange(current) {
                /*console.log('Current: ', current);*/
            }
        };
        //const { loading, selectedRowKeys } = this.state;

        const rowSelection = {
            /*onChange(selectedRowKeys, selectedRows) {
             console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
             },
             onSelect(record, selected, selectedRows) {
             console.log(record, selected, selectedRows);
             },
             onSelectAll(selected, selectedRows, changeRows) {
             console.log(selected, selectedRows, changeRows);
             }*/
        };
        //const { getFieldProps } = this.props.form;
        return (
            <div id="images">
                <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
                    <div style={{float:'right'}}>
                        <SearchInput style={{ width: 200 }} onSearch={function(){}} placeholder='请输入关键字查询' />
                    </div>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={tempData} pagination={pagination} />
                <div id="_mask"></div>
            </div>
        )
    }
}
_OrderManage = Form.create()(_OrderManage);
let OrderManage ;
export default OrderManage = connect((state)=>{
    const {isFetch,items} = state.rootReducer.images;
    const {user} = state.rootReducer;
    return {isFetch,items,user}
})(_OrderManage)